﻿<template>
  <div>
    <div class = "addColumn">
      <p @click = "handleAddOption()"> <i class="iconfont icon-add"></i>添加页面事件或行为</p>
    </div>
    <el-table :data = 'this.formItemConfig.sub_options.options.events' style = "width:100%" empty-text = "暂无数据，请添加" border stripe max-height = 340>
      <el-table-column align = "center" label = '事件或行为类别' min-width = "180px" :render-header = 'handelHelp'
      label-class-name = "初始化页面事件无需关联元素，类型为行为时无需绑事件">
        <template slot-scope = "scope">
          <el-select v-model = "scope.row.eventsType" placeholder = '请选择' clearable filterable @change = "(val) => {eventTypeChange(val, scope.$index)}">
            <el-option-group v-for = 'group in eventSelectOption' :key = 'group.groupKey' :label = 'group.groupLabel'>
              <el-option v-for = "(item, index) in group.options" :key = 'index' :value = 'item.value' :label = 'item.label'></el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = '事件名称' show-overflow-tooltip min-width = "120px">
        <template slot-scope = "scope">
          <el-select v-model = "scope.row.eventsNo" placeholder = '请选择' clearable filterable
          :disabled = "!scope.row.eventsType || scope.row.eventsType.indexOf('selfDefineTable') === -1">
            <el-option v-for = '(eventItem, eventIndex) in allEvents' :key = 'eventIndex' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = '执行顺序' min-width = "120px">
        <template slot-scope = "scope">
          <el-input-number size = "mini" v-model = "scope.row.actionIndex" :min = "-10" :max = "10" :step = "1" step-strictly
          @change = "(val, oldVal) => {actionIndexChange(val, oldVal, scope.$index)}"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = '设置词典表' min-width = "80px">
        <template slot-scope="scope">
          <span @click = 'setEventDic(scope.row, scope.$index)' class = 'clickStatus'>...</span>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = '弹窗页面' show-overflow-tooltip min-width="120px">
        <template slot-scope = "scope">
          <el-select v-model = 'scope.row.dialogUid' clearable filterable
          :disabled = "!scope.row.eventsType || scope.row.eventsType.indexOf('selfDefineTable') !== -1">
            <el-option :label = "pageUid.category ? (pageUid.name + '(' + pageUid.category + ')') : pageUid.name" :value = 'pageUid.uid' v-for = "pageUid in allPageUid" :key = 'pageUid.uid'></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = '按钮名称' label-class-name = "自定义表格行行为时，可设置行按钮名称">
        <template slot-scope = "scope">
          <el-input v-model = 'scope.row.selfName' :disabled = "scope.row.eventsType ==='selfDefineTable_export'" clearable placeholder = "请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = 'icon名称' label-class-name = "自定义表格行行为时，可设置行按钮前的icon名称">
        <template slot-scope = "scope">
          <el-input v-model = 'scope.row.selfIconName' :disabled = "scope.row.eventsType ==='selfDefineTable_export'" clearable placeholder = "请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = 'express' show-overflow-tooltip>
        <template slot-scope = "scope">
          <span class = 'clickStatus' @click = "settingFixedExpress(scope.row, scope.$index)">点击设置</span>
        </template>
      </el-table-column>
      <el-table-column align = "center" label = "操作" width = "30">
        <template slot-scope = "scope">
          <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Event-Dic :row = 'clickRow' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
    <Fixed-Filter-Express :fixedFilterRow = 'fixedFilterRow' :fixedFilterDialog = 'fixedFilterDialog'
    @settingFixedFilterSuccess = 'settingFixedFilterSuccess' @settingFixedFilterFailed = 'fixedFilterDialog = false'></Fixed-Filter-Express>
  </div>
</template>

<script>
import EventDic from '@/components/Events/EventsDic.vue'
// 初始化表格固有过滤条件的弹窗
import FixedFilterExpress from './Fixed_filter_express.vue'
export default {
  props: ['formItemConfig', 'propsInfo'],
  data () {
    return {
      allEvents: [],
      allPageUid: [],
      // 打开设置页面词典表的弹窗
      eventDicDialog: false,
      clickRow: null,
      clickIndex: null,
      // 可设置页面事件的类型
      eventSelectOption: [
        {
          groupKey: 'tableEvents',
          groupLabel: '表格行事件(需绑定事件)',
          options: [
            {
              value: 'selfDefineTable_export',
              label: '表格行导出事件(直接执行事件)'
            },
            {
              value: 'selfDefineTable',
              label: '自定义表格行事件(直接执行事件)'
            }
          ]
        },
        {
          groupKey: 'tableActions',
          groupLabel: '表格行行为(无需绑定事件)',
          options: [
            {
              value: 'selfDefineDialogTable',
              label: '自定义表格行行为(打开弹窗)'
            },
            {
              value: 'selfDefinePageTable',
              label: '自定义表格行行为(打开系统内页面)'
            },
            {
              value: 'selfDefinePageTable_openPage',
              label: '自定义表格行行为(打开系统外页面)'
            }
          ]
        }
      ],
      // 初始化表格固有过滤条件的弹窗
      fixedFilterDialog: false,
      fixedFilterRow: null,
      fixedFilterIndex: null
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      this.getAllEvents()
      this.clickRow = null
      this.clickIndex = null
      if (this.propsInfo.settingFrom === 'workflowSetting') {
        this.getAllWorkflowPage()
      } else if (this.propsInfo.settingFrom === 'dynamicSetting') {
        this.getAllDynamicPage()
      }
    },
    // 事件或者行为的类型变化时
    eventTypeChange (val, index) {
      if (val) {
        if (val === 'selfDefinePageTable_openPage' || val === 'selfDefineDialogTable' || val === 'selfDefinePageTable') {
          this.formItemConfig.sub_options.options.events[index].dialogUid = ''
        } else if (val === 'selfDefineTable' || val === 'selfDefineTable_export') {
          this.formItemConfig.sub_options.options.events[index].eventsNo = ''
        }
      } else {
        this.$set(this.formItemConfig.sub_options.options.events, index, {
          eventsNo: '',
          eventsType: '',
          dialogUid: '',
          actionIndex: 1,
          inputDic: [],
          outputDic: [],
          selfName: '',
          selfIconName: 'icon-bianji',
          fixed_filter_express: '',
          fixed_orderby_express: '',
          other_condition_express: '',
          fixed_data_express: '',
          ref_express: '',
          row_express: '',
          linkUrlExpress: ''
        })
      }
    },
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取所有动态表单的页面
    getAllDynamicPage () {
      this.allPageUid = []
      this.$get('/d_form', {
        type: 'meta'
      }).then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.propsInfo.uid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取所有流程表单的页面
    getAllWorkflowPage () {
      this.allPageUid = []
      this.$basicWFGet('/d_form').then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.propsInfo.uid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 删除选项时
    handleOptionsRemove (index) {
      this.formItemConfig.sub_options.options.events.splice(index, 1)
    },
    // 新增选项时
    handleAddOption () {
      let obj = {
        eventsNo: '',
        eventsType: '',
        dialogUid: '',
        actionIndex: 1,
        inputDic: [],
        outputDic: [],
        selfName: '',
        selfIconName: 'icon-bianji',
        fixed_filter_express: '',
        fixed_orderby_express: '',
        other_condition_express: '',
        fixed_data_express: '',
        ref_express: '',
        row_express: '',
        linkUrlExpress: ''
      }
      this.$set(this.formItemConfig.sub_options.options.events, this.formItemConfig.sub_options.options.events.length, obj)
    },
    // 设置初始化事件的固有查询事件
    settingFixedExpress (row, index) {
      this.fixedFilterDialog = true
      this.fixedFilterRow = JSON.parse(JSON.stringify(row))
      this.fixedFilterIndex = index
    },
    // 设置初始化事件的固有查询事件成功时
    settingFixedFilterSuccess (fromSetting) {
      let eventsArrayType = 'inherentEvents'
      if (this.fixedFilterRow.eventsType.indexOf('selfDefine') !== -1) {
        eventsArrayType = 'events'
      }
      this.fixedFilterDialog = false
      this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex].fixed_filter_express = fromSetting.filterExpress
      this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex].fixed_orderby_express = fromSetting.orderbyExpress
      this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex].other_condition_express = fromSetting.conditionExpress
      this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex].fixed_data_express = fromSetting.dataExpress
      this.$set(this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex], 'ref_express', fromSetting.refExpress)
      this.$set(this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex], 'row_express', fromSetting.rowExpress)
      this.$set(this.formItemConfig.sub_options.options[eventsArrayType][this.fixedFilterIndex], 'linkUrlExpress', fromSetting.linkUrlExpress)
    },
    // 设置词典表时
    setEventDic (row, index) {
      if (row.eventsNo) {
        this.eventDicDialog = true
        this.clickRow = JSON.parse(JSON.stringify(row))
        this.clickIndex = index
      } else {
        this.$message({
          message: '请添加需要的事件',
          type: 'warning'
        })
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      this.eventDicDialog = false
      this.formItemConfig.sub_options.options.events[this.clickIndex].inputDic = fromSetting.inputDic
      this.formItemConfig.sub_options.options.events[this.clickIndex].outputDic = fromSetting.outputDic
    },
    // 事件执行的顺序改变时
    actionIndexChange (val, oldVal, index) {
      if (val === 0) {
        if (val > oldVal) {
          this.formItemConfig.sub_options.options.events[index].actionIndex = val + 1
        } else {
          this.formItemConfig.sub_options.options.events[index].actionIndex = val - 1
        }
      }
    }
  },
  watch: {
    'propsInfo.settingVisible': {
      handler (val) {
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  },
  components: {
    EventDic, FixedFilterExpress
  }
}
</script>
